<template>
  <div class="hs-ed">
    <div class="hs-ed-wrap" id="age-root"></div>
  </div>
</template>

<script>
//员工年龄分布
import * as echarts from "echarts";

const option = {
  title: {
    text: "-  员工年龄分布  -",
    subtext: "",
    left: "center",
    top: 10,
    textStyle: {
      color: "#CFEEF8",
      fontSize: 14,
    },
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "line",
    },
  },
  grid: {
    left: "3%",
    right: "4%",
    bottom: "3%",
    containLabel: true,
  },
  xAxis: [
    {
      type: "category",
      data: ["18~25岁", "25~30岁", "30~40岁", "40~50岁", ">50"],
      axisTick: {
        alignWithLabel: true,
      },
      axisLabel: {
        color: "#fff",
        fontSize: 10,
      },
      axisLine: {
        lineStyle: {
          color: "#134068",
        },
      },
    },
  ],
  yAxis: [
    {
      type: "value",
      axisLabel: {
        color: "#fff",
      },
      axisLine: {
        lineStyle: {
          color: "#134068",
        },
      },
      splitLine: {
        lineStyle: {
          type: "solid",
          color: "#134068",
        },
      },
    },
  ],
  series: [
    {
      name: "年龄",
      type: "bar",
      barWidth: "20",
      itemStyle: {
        normal: {
          barBorderRadius: [10, 10, 0, 0],
          color: new echarts.graphic.LinearGradient(
            0,
            1,
            0,
            0,
            [
              {
                offset: 0,
                color: "#015FAB",
              },
              {
                offset: 0.5,
                color: "#3ED3E5",
              },
              {
                offset: 1,
                color: "#43DDEA",
              },
            ],
            false
          ),
        },
      },
      data: [],
    },
  ],
};

export default {
  name: "emAgeDis",
  data() {
    return {
      chart: null,
    };
  },
  methods: {
    drawbar(id) {
      let o = document.getElementById(id);
      let height = o.clientHeight;
      let width = o.clientWidth;
      o.style.height = height + "px";
      o.style.width = width + "px";
      this.chart = echarts.init(o, null);
      option.series[0].data = this.$store.state.statistical.emAgeDis;
      this.chart.setOption(option);
    },
  },
  mounted() {
    this.$nextTick(function () {
      this.drawbar("age-root");
      return;
      var that = this;
      var resizeAgeTimer = null;
      window.onresize = function () {
        if (resizeAgeTimer) clearTimeout(resizeAgeTimer);
        resizeAgeTimer = setTimeout(function () {
          that.drawbar("age-root");
        }, 300);
      };
    });
    this.$store.watch(
      (state, getter) => {
        return state.statistical.emAgeDis;
      },
      () => {
        this.drawbar("age-root");
      }
    );
  },
};
</script>


<style scoped>
.hs-ed {
  /* border: 1px solid rgb(255, 0, 234); */
  width: 100%;
  height: 100%;
}
.hs-ed-wrap {
  /* border: 1px solid yellow; */
  /* width: 651px;
  height: 335px; */
  width: 100%;
  height: 100%;
}
</style>